<template>
	<view class="content">
		<image class="bgimage" src="https://pic.imgdb.cn/item/6194da4c2ab3f51d9160804a.jpg"></image>
		<image class="logo" src="/static/images/LNlogo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="int">
			<view class="int-title"><text>账 号</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<input type="number" v-model="form.userNum" placeholder=" 请输入学号 / 工号" maxlength="12" />
		</view>
		<view class="int">
			<view class="int-title"><text>密 码</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<input type="text" v-model="form.userPwd" :password="filled" password="ture" placeholder=" 请输入密码" />
		</view>
		<!-- <view class="forget" @click="forget()"><text>忘记密码？</text></view> -->
		<view class="butt">
			<button class="login" @click="onlogin()">登 录</button>
		</view>
		<!-- <view class="copyright">© 2021-2022 · 岭梦空间 </view> -->
	</view>
</template>

<script>
	import md5 from "../../util/md5.js"
	export default {
		data() {
			return {
				filled: false,
				barHeight: uni.getStorageSync("barHeight"),
				disabled: false,
				//用户输入内容
				form: {
					userNum: "",
					userPwd: "",
				},
				obj: {
					tName: "",
					tNum: "",
					tPassWord: "",
				},

			};
		},

		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					Window.windowWidth = res.windowWidth;
					Window.windowHeight = res.windowHeight;
				}
			})

		},

		methods: {
			forget() {
				uni.navigateTo({
					url: "/pages/login/forget",
				})
			},

			onregister() {
				uni.navigateTo({
					url: "/pages/login/register",
				})
			},

			onlogin() {
				let obj = {}
				obj.tNum = this.form.userNum
				obj.tPassWord = md5(this.form.userPwd)

				this.$set(this.obj, 'tNum', this.form.userNum)
				this.$set(this.obj, 'tPassWord', md5(this.form.userPwd))
				this.$set(this.obj, 'tName', this.obj.tName)

				const res = this.$myRequest({
					url: "/teacher/login",
					data: {
						tNum: this.obj.tNum,
						tPassWord: this.obj.tPassWord,
						tName: this.obj.tName,
					},
					method: 'POST',
				}).then(res => {
					if (res.data.success) {
						uni.setStorage({
								key: "user",
								data: res.data.data
							}),
							uni.switchTab({
								url: "/pages/home/home",
							})
					}
				})
				if (this.form.userNum == "") {
					return uni.showToast({
						title: '您还没有输入账号！！',
						icon: "none"
					})
				} else if (this.form.userPwd == "") {
					return uni.showToast({
						title: "您还没有输入密码！！",
						icon: "none"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bgimage {
		margin-top: 78%;
		background-repeat: no-repeat;
		position: absolute;
		z-index: -1;
		background-size: 100%;
		width: 100%;
		min-height: 100%;
		opacity: 0.5;
	}

	.logo {
		height: 210rpx;
		width: 680rpx;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.int {
		margin: 30rpx 25rpx 20rpx;
		border-radius: 25rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border: 3rpx solid #965353;

		// box-shadow: darkgray 2px 2px 4px;
		input {
			content: '';
			width: 420rpx;
			height: 55rpx;
			flex: 1;
			font-size: 32rpx;
		}

		&-title {

			width: 100rpx;
			line-height: 30rpx;

			text {
				display: flex;
				font-size: 33rpx;
				font-weight: 600;
				color: #965353;

			}
		}
	}

	.logopic {
		// display: flex;
		height: 480rpx;
		background-size: 100%;
		width: 100%;
		position: absolute;
		bottom: 8vw;
		opacity: 0.7;
	}

	.empty {
		height: 35rpx;
		width: 2rpx;
		background-color: #bbbbbb;
		margin-left: rpx;
	}

	.right {
		flex: 0;
		padding-right: 25rpx;
	}

	.forget {
		position: relative;
		left: 27vw;

		text {
			color: #808080;
		}
	}

	.butt {
		display: flex;
		margin-top: 30rpx;
		width: 600rpx;

		text {
			display: flex;
			align-items: center;
			text-align: center;
		}

		.login,
		.register {
			text-align: center;
			width: 450rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background-color: #02a7ff;
			color: white;
			font-size: 33rpx;
			font-weight: 600;
			box-shadow: darkgray 2px 2px 4px;
		}
	}

	.copyright {
		position: absolute;
		bottom: 10rpx;
		font-size: 28rpx;
		color: #9f9f9f;
	}
</style>
